<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="40%">
    <div class="PaChong-box" style="height:460px;">
      <el-scrollbar id="scrollbar" style="height:100%">
        <el-tree
          ref="tree"
          :props="props"
          :data="treeData"
          node-key="pkId"
          show-checkbox
          default-expand-all
          :default-checked-keys="checkedKeys"
          @check-change="handleCheckChange"
        >
        </el-tree>
      </el-scrollbar>
    </div>
    <div slot="footer" class="dialog-footer" v-if="isAdd">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleOk()" size="small">确 定</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-else>
      <el-button @click="handleCancel" size="small">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { bindRoleSceenMenu, getRoleSceenMenu } from '../js/auth'
import { getUserSceneTree } from '../js/scene'
export default {
  name: 'AuthorityModal',
  data () {
    return {
      title: '角色授权',
      isAdd: false,
      dialogVisible: false,
      model: {},
      treeData: [],
      tenantNo: '', // 租户编号
      checkedKeys: [],
      props: {
        label: 'name',
        children: 'children'
      },
      selectedKeys: []
    }
  },
  computed: {},
  mounted () {},
  methods: {
    // 父组件调用
    edit (record) {
      this.model = Object.assign({}, record)
      this.getStoreTree()
      this.dialogVisible = true
    },
    // 获取列表
    async getStoreTree () {
      let res = await getUserSceneTree()
      if (res.code === 0 && res.data) {
        this.tenantNo = res.data.tenantNo
        this.treeData = this.recursionTree(res.data.sceneTreeResps)
        this.getUrolePermissionrelData()
      }
    },
    async getUrolePermissionrelData () {
      let res = await getRoleSceenMenu({
        roleNo: this.model.roleNo,
        pageNum: 1,
        pageSize: 10000
      })
      if (res.code === 0) {
        this.checkedKeys = res.data.list.map(i => i.menuNo)
      }
    },
    // 递归处理tree结构数据
    recursionTree (result) {
      const treeData = []
      if (result && result.length !== 0) {
        result.forEach(item => {
          let obj = {
            pkId: item.pkId,
            cusId: item.parentId === '0' ? `${item.sceneNo}|` : `${item.sceneNo}|${item.pkId}`,
            name: item.parentId === '0' ? item.sceneName : item.name,
            disabled: !this.isAdd
          }
          if (item.children && item.children.length > 0) {
            obj.children = this.recursionTree(item.children)
          }
          treeData.push(obj)
        })
      }
      return treeData
    },
    handleCheckChange () {
      let checkedNodes = this.$refs.tree.getCheckedNodes()
      let checkedCusId = []
      if (checkedNodes.length !== 0) {
        checkedCusId = checkedNodes.map(e => e.cusId)
      }
      this.selectedKeys = checkedCusId
    },
    handleOk () {
      this.bindUrolePermissionrelFun()
    },
    handleCancel () {
      this.checkedKeys = []
      this.treeData = []
      this.selectedKeys = []
      this.dialogVisible = false
    },
    async bindUrolePermissionrelFun () {
      let params = {
        sceneAndPermissionNoList: this.selectedKeys,
        tenantNo: this.tenantNo,
        roleNo: this.model.roleNo
      }
      let res = await bindRoleSceenMenu(params)
      if (res.code === 0) {
        this.$message.success('绑定成功!')
        this.handleCancel()
      } else {
        this.$message.warning(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
.el-dialog {
  .el-input,
  .el-select {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
